<html>
    <head>
        <meta charset="utf-8">
        </head>
        <body>
            <!DOCTYPE html>
<html>
    <head><!--雷德亮219970111-->
        <meta charset="UTF-8">
        <title>Insert title here</title>
            <script src="jquery.js"></script><!-- 引入jq文件 -->
        
        </head>
        <body>
            <form action="loginServlet" method="get">
                <input type="text" name="name"  placeholder="用户名"><span id="span"></span><br>
                <input type="password" name="pwd" placeholder="密码"><br>
                <input type="submit" value="提交">
            </form>
            
                <script>
                $(function(){
                    $("input[name=name]").blur(function(){//失去焦点
                        var name = $(this).val();//获取值
                        console.log(name)
                        var span = $("#span");
                        //发送ajax请求
                        $.get("/AjaxJson/loginServlet",{username:name},function(data){
                            //判断是否存在,显示不同的样式
                            if(data.isExist){
                                span.css("color","red");
                                span.html(data.hint);
                            }else{
                                span.css("color","green");
                                span.html(data.hint);
                            }
                        },"json");
                    });
                });
            </script>
        </body>

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
            <head>
                <title></title>
                <script type="text/javascript" src="jquery-1.8.3.js"></script>
                <script type="text/javascript">
                $(function(){
                    $('#btn').click(function(){
                        var name=$("#name").val();
                        $.ajax({
                            url:'CheckUserNameServlet',
                            type:'POST',
                            //data选项既可以包含一个查询字符串，比如 key1=value1&amp;key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。
                            data: {name: name},
                            dataType:'text',
                            success:function(data){
                                alert(name);
                                alert(data);
                                if(data==0){//用户名存在
                                    alert("用户名存在");
                                    $("#span01").html("<font color='red'>用户名已被注册</font>");
                                }else{
                                    alert("用户名可用");
                                    $("#span01").html("<font color='green'>用户名可以使用</font>");
                                    alert("注册成功！")
                                }
                            },
                            error:function(){
                                alert('ajax请求失败')
                            }
                            
                        })
                    })
                })</script>
         
            </head>
            <body>
                姓名：<input type="text" id="name"/><span id="span01"></span><br/>
                密码：<input type="password" id="pwd"/><br/>
                <button id="btn">注册</button>
            </body>
        </html>
            
        </body>

</html>